/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Basisopbouw voor alle pagina's */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

* { 
	box-sizing: border-box;
	}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 0px; 
  width: 100%;
}

html {
	font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8em;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Opbouw login */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

div.login {
	margin-top: 200px;
	text-align: center;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Opbouw header (in basis_html.php) */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

div.header {
   background: url(../plaatjes/headerbg.jpg);
   background-size: 100% auto;
   background-repeat: no-repeat;
}

img.header {
	float: left;
	width: 100px;
	margin: 5px;
}

div.headertekst {
 	float: left;
 	margin-top: 10px;
 	padding-left: 45px;
	color: red;
	font-size: 1.0em;
}

div.menuheader {
   background-color: #15799e;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Basis container */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

body {
	margin: 0px;
	padding: 0px;
  background-color: #a6a6a6;
  color: black;
  -webkit-text-size-adjust: 100%;			/* font-sizes ook op iPhone correct maken */
}

img.menu {
 	margin-top: 10px;
 	margin-left: 20px;
	height: 40px;
}

.content_grid {
	text-align: center;
}

.footer {
  position:fixed;
  z-index: 999999;
  left: 0px;
  bottom: 0px;
  padding: 10px;
  width: 100%;
/*  background: lightgrey; */
	background: #666666;
	text-align: center; 
	color: black;
	font-size: 0.8em; 
}

a:link.quasar , a:visited.quasar , a:hover.quasar , a:active.quasar {
  text-decoration: none;
 	color: black;
	cursor: pointer;
}
a:active.quasar , a:hover.quasar {
 	color: yellow;
}

label {
  display: inline-block;
  width:140px;
  margin-left: 5px;
  text-align:right;
  padding-right: 10px;
}

input[type=text].inlog , input[type=password].inlog{
  border-radius: 5px;
	box-shadow: 3px 3px 10px black;
	margin-bottom: 4px;
	width:	216px;
	height: 40px;
	background: lightgreen;
	font-size:	1.1em;
	text-align:	center;
}

input[type=text].transactie {
  border-radius: 5px;
	box-shadow: 3px 3px 10px black;
  margin-top: -5px;
  padding: 0px;
	width:	72px;
	height: 36px;
	background:	navy;
	color: white;
	font-size:	2.0em;
	text-align:	center;
}

input[type=text].debet_credit {
  border-radius: 5px;
	box-shadow: 3px 3px 10px black;
  padding: 0px;
	width:	72px;
	height: 36px;
	background:	red;
	color: white;
	font-size:	2.0em;
	text-align:	center;
}

input[type=text].bedrag {
  border-radius: 5px;
	box-shadow: 3px 3px 10px black;
  padding: 0px;
  padding-right: 20px;
	width:	146px;
	height: 36px;
	background: lightgreen;
	font-size:	2.0em;
	text-align:	right;
}

input[type=text].schuif , input[type=text].schuifbedrag{
  border-radius: 5px;
	box-shadow: 3px 3px 10px black;
	margin-bottom: 4px;
	padding:10px;
	width:	216px;
	height: 40px;
	font-size:	1.2em;
	background: lightgreen;
	text-align:	left;
}

input[type=text].schuifbedrag {
	text-align:	right;
}

input[type=text].label {
  border-radius: 5px;
	box-shadow: 3px 3px 10px black;
	margin-bottom: 4px;
	width:	85px;
	height: 40px;
	background: navy;
	color: white;
	font-size:	1.1em;
	text-align:	center;
}

input[type=text].brandstof {
  border-radius: 5px;
	box-shadow: 3px 3px 10px black;
	margin-bottom: 4px;
	width:	130px;
	height: 40px;
	background: lightgreen;
	font-size:	1.3em;
	padding-right: 10px;
	text-align:	right;
}

input[type=text].indeling {
  border-radius: 5px;
	box-shadow: 3px 3px 10px black;
	margin-bottom: 4px;
	width:	216px;
	height: 40px;
	background: grey;
	color: white;
	font-size:	1.1em;
	padding-left: 5px;
	text-align:	left;
}

input[type=text].funda {
  border-radius: 5px;
	box-shadow: 3px 3px 10px black;
	margin-bottom: 4px;
	width:	216px;
	height: 40px;
	background: white;
	color: black;
	font-size:	1.1em;
	padding-left: 5px;
	text-align:	center;
}

input[type=date] {
  border-radius: 5px;
	box-shadow: 3px 3px 10px black;
	margin-bottom: 4px;
	width:	216px;
	height: 40px;
	padding-left: 5px;
	background:	navy;
	color: white;
	font-size:	1.1em;
	text-align:	left;
}

textarea {
  border-radius: 5px;
	padding: 2px; 
	box-shadow: 3px 3px 10px black;
	width: 216px;
	height: 50px;
	resize: vertical;
	padding: 10px;
	background: white;
	color: black;
	font-size:	1.1em;
}

input[type=text].fundainvoer {
  border-radius: 5px;
	box-shadow: 3px 3px 10px black;
	margin-bottom: 4px;
	width:	216px;
	height: 40px;
	background: white;
	color: black;
	font-size:	1.1em;
	padding-left: 5px;
	text-align:	center;
}

input[type=text].vraagprijs {
  border-radius: 5px;
	box-shadow: 3px 3px 10px black;
	margin-bottom: 4px;
	width:	216px;
	height: 40px;
	background: lightgreen;
	font-size:	1.1em;
	padding-right: 10px;
	text-align:	center;
}

select {
  border-radius: 5px;
	box-shadow: 3px 3px 10px black;
	padding: 2px;
	background-color: #0c455a;
  color: white;
  cursor: pointer;
}

div.warning {
	text-align: center;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Zoeken */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

label.zoek {
  display				: inline-block;
  width					:	90px;
  text-align		:	left;
}

input[type=text].zoek {
  border-radius	: 5px;
	box-shadow		: 3px 3px 10px black;
	margin-bottom	: 4px;
	width					:	248px;
	height				: 30px;
	background		: white;
	color					: black;
	padding-left	: 5px;
	text-align		:	left;
}

input[type=text].rekening {
  border-radius	: 5px;
	box-shadow		: 3px 3px 10px black;
	margin-bottom	: 4px;
	width					:	155px;
	height				: 30px;
	background		: white;
	color					: black;
	padding-left	: 5px;
	text-align		:	left;
}

input[type=text].decimal {
  border-radius	: 5px;
	box-shadow		: 3px 3px 10px black;
	margin-bottom	: 4px;
	width					:	155px;
	height				: 30px;
	background		: white;
	color					: black;
	padding-right	: 5px;
	text-align		:	right;
}

input[type=date].zoek {
	width					:	155px;
	height				: 30px;
	background		: white;
	color					: black;
}

input[type=radio] {
  height				: 15px;
  width					: 15px;
  cursor				: pointer;
}

select.zoek {
  border-radius	: 5px;
	box-shadow		: 3px 3px 10px black;
	margin-bottom	: 4px;
	width					:	248px;
	height				: 30px;
	background		: white;
	color					: black;
	padding				: 2px;
  cursor				: pointer;
}


/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Buttons */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

button , input[type=submit] {
  border-radius: 5px 5px 5px 5px;
 	box-shadow: 5px 5px 10px black;
 	margin: 1px;
  padding:  0px;
 	border: none;
	width:	70px;
	height:	70px;
	background:	grey;
  color: white;
  cursor: pointer;
  text-align: center;
  font-size: 2.0em;
}

button.cijfer {
  font-weight: bold; 
}

button.transactie {
	background:	lightgrey;
	color: black;
}

button.afbij {
  border-radius: 5px 5px 5px 5px;
	height:	50px;
	width:	142px;
	background:	lightgrey;
	color: black;
}

button.clear {
	background:	red;
}

button.ok {
	background:	green;
}

button.groep {
  width:  320px;
	height: 50px;
	background:	blue;
  font-size: 1.6em;
}

button.categorie , input[type=submit]{
 	width:	320px;
	height: 50px;
	background:	green;
  font-size: 1.6em;
}

button.terug {
 	width:	320px;
	height: 50px;
	background:	grey;
  font-size: 1.6em;
}

button.maand {
 	width: 90px;
	height: 40px;
	background:	grey;
	color: white;
  font-size: 1.0em;
}

div.kopje {
 	padding: 10px;
	color: white;
  font-size: 1.3em;
}

button.opslaan {
 	width:	216px;
	height: 50px;
	background:	green;
  font-size: 1.1em;
}

button.delete {
 	width:	108px;
	height: 40px;
	background:	red;
  font-size: 1.1em;
}

button.wijzig {
 	width:	108px;
	height: 40px;
	background:	green;
  font-size: 1.1em;
}

button.overzicht {
  border-radius: 10px 10px 10px 10px;
 	box-shadow: 5px 5px 10px black;
 	margin: 3px;
 	border: none;
	width:	216px;
	height:	50px;
	background:	navy;
  color: white;
  cursor: pointer;
  text-align: center;
  font-size: 1.1em;
}

button.home {
  border-radius: 10px 10px 10px 10px;
 	box-shadow: 5px 5px 10px black;
 	margin: 3px;
 	border: none;
	width:	320px;
	height:	50px;
	background:	green;
  color: white;
  cursor: pointer;
  text-align: center;
  font-size: 1.6em;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Tekstscherm    */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

.content {
	margin-top: 20px;
}

.tekstscherm {
  border-radius: 10px 10px 10px 10px;
 	box-shadow: 5px 5px 10px black;
	border: 1px solid black;
	margin-bottom: 10px;
	padding: 10px;
	padding-top: 0px;
  background: #15799e;
	color: white;
	text-align: left;
	line-height: 130%;
  letter-spacing: 1px;
}

.tekstscherm2 {
	margin-bottom: 10px;
	padding: 10px;
	padding-top: 0px;
	color: white;
	text-align: left;
	line-height: 130%;
  letter-spacing: 1px;
}

.fout {
  background-color: red;
}

img.middenkaal , img.midden {
	width: 75%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

img.midden {
  border-radius: 10px 10px 10px 10px;
 	box-shadow: 5px 5px 10px black;
	border: 1px solid black;
}

img.klantkaart {
  border-radius: 10px 10px 10px 10px;
 	box-shadow: 5px 5px 10px black;
	border: 1px solid black;
	width: 100%;
	max-width: 400px;
  -ms-transform: rotate(-5deg); /* IE 9 */
  -webkit-transform: rotate(-5deg); /* Chrome, Safari, Opera */
  transform: rotate(-5deg);  
}

.assorti {
	display: block;
}

div.iphonepage {
	display: none;
	text-align: center;
}

div.pageoplaptop {
	display: none;
	text-align: center;
}

div.pageopiphone {
	display: block;
  border-radius: 10px 10px 10px 10px;
 	box-shadow: 5px 5px 10px black;
	border: 1px solid black;
	margin: auto;
	margin-bottom: 5px;
	width: 90%;
	padding: 10px;
  background: green;
	color: white;
}

div.wijzig {
  border-radius: 10px 10px 10px 10px;
 	box-shadow: 5px 5px 10px black;
	border: 1px solid black;
	margin: auto;
	margin-bottom: 5px;
	width: 90%;
	max-width:	400px;
	padding: 10px;
  background: green;
	color: white;
}

div.saldo {
  border-radius: 10px 10px 10px 10px;
 	box-shadow: 5px 5px 10px black;
	border: 1px solid black;
	margin: auto;
	margin-bottom: 5px;
	width: 90%;
	max-width:	400px;
	padding: 10px;
  background: green;
	color: white;
}

div.smartonly {
	display			: block;
	margin			: auto;
	margin-top	: 5px;
	width				: 90%;
	text-align	: center;
}

div.pconly {
	display			: none;
	margin			: auto;
	margin-top	: 5px;
	width				: 90%;
	text-align	: center;
}

div.iphoneblank {
	display: block;
	margin-top: 5px;
	margin: auto;
	width: 90%;
	text-align: center;
}

div.overzicht {
  border-radius	: 10px 10px 10px 10px;
 	box-shadow		: 5px 5px 10px black;
	margin				: auto;
	padding				: 20px;
	width					: 216px;
	background		: green;
	color					: white;
	font-size			: 1.1em;
}

div.budgetpage {
  border-radius: 10px 10px 10px 10px;
 	box-shadow: 5px 5px 10px black;
	border: 1px solid black;
	margin: auto;
	margin-bottom: 5px;
	width: 90%;
	max-width:	600px;
	padding: 10px;
  background: green;
	color: white;
}

table.iphone {
	margin: 0 auto;
}

td.opentijd_l , td.opentijd_c  {
	padding-right: 8px;
  letter-spacing: 1px; 
	color: white;
	text-align: left;
}
td.opentijd_c {
	text-align: center;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Artikelen grid */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

.grid , .grid_winkelwagen, .grid_menu {
	display: inline-block;
	vertical-align: middle; 
  border-radius: 10px;
	box-shadow: 5px 5px 10px black;
	width: 230px;
	height: 343px; 
	background: #f2f2f2;
  border: 1px solid black;
	margin: 0.5%;
	margin-top: 15px;
	padding: 0px;
	color: black;
	text-align: center;
}

.grid_winkelwagen {
	height: 368px;
} 

.grid_menu {
	height: 225px;
	background: grey;
	color: white;
}

.grid_inner {
	width: 100%;
	height:	173px; 
}

.grid_image {
  border-radius: 10px 10px 0px 0px;
	width: 100%; 	
	height :100%;
}

.grid_image_specs {
  border-radius: 10px 10px 10px 10px;
	box-shadow: 5px 5px 10px black;
	width: 100%; 	
	height: 100%;
}

.grid_artikel {
 	height: 15px;
	padding-left: 10px; 
	padding-right: 10px;
	font-weight: bold; 
}

.grid_tekst {
 	height: 15px;
	padding-left: 10px; 
	padding-right: 10px;
	margin-bottom: 20px;
	font-size: 0.8em;
	font-style: italic;
	text-align: left;
}

.grid_prijs {
 	padding-left: 10px;
	font-size: 1.0em;
}

.grid_aantal {
 	padding-left: 10px;
	font-size: 1.0em;
}

.grid_bedrag {
 	background: darkgrey;
 	padding-top: 10px;
 	padding-bottom: 10px;
 	color: white;
	font-size: 1.3em;
}

.grid_info , .grid_icon {
	float: left;
	margin-top: 10px;
	margin-left: 30px;
	margin-right: 30px;
	width: 30px;
}

.grid_icon {
	float: right;
	margin-right: 10px;
	margin-left: 0px;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Artikelen informatie grid */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

.grid_specs {
	margin-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
}

.grid_specs_image {
  border-radius: 10px 10px 10px 10px;
	box-shadow: 5px 5px 10px black;
	width: 100%;
}

.grid_specs_balk {
  border-radius: 8px 8px 8px 8px;
	box-shadow: 3px 3px 5px black;
	margin-bottom: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	background: lightgrey; 
	text-align: center;
	color: black;
  letter-spacing: 0px;
}

.grid_specs_balk_opties {
  border-radius: 8px 8px 8px 8px;
	box-shadow: 3px 3px 5px black;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-top: 10px;
	padding-left:	10px;
	padding-right	:	10px;
	padding-bottom:	20px;
	text-align: left;
	background: lightgrey; 
	color: black;
  letter-spacing: 0px;
}

.grid_specs_tekst {
	padding-left:	2%;
	padding-right: 2%;
	line-height: 150%;
}

/*---------------------------------------------------------------------------*/
/* Responsive functies																											 */
/*---------------------------------------------------------------------------*/

@media only screen and (min-width: 768px) {
  img.header 					{width			: 240px	;	margin-bottom	: 40px	;	}
	.headertekst		 		{margin-top	: 15px	;	font-size			: 3.0em	;	}  
  .zijkantlinks				{display		: block	;													}
  .zijkantrechts 			{display		: block	;													}
	.onder 							{display		: none	;													}
	.assorti						{display		: none	;													}
	.shopcart_buttondiv {text-align	: right	;													}
	div.iphonepage 			{display		: block	;													}
	div.pageopiphone		{display		: none	;													}
	div.smartonly				{display		: none	;													}
	div.pconly					{display		: block	;													}
	div.iphoneblank			{display		: none	;													}
	div.pageoplaptop		{display		: block	;													}
}

@media only screen and (min-width: 480px) {
  .col-iphone4-5 	 {width:   5.00%;}
  .col-iphone4-10  {width:  10.00%;}
  .col-iphone4-15  {width:  15.00%;}
  .col-iphone4-20	 {width:  20.00%;}
  .col-iphone4-25	 {width:  25.00%;}
  .col-iphone4-30	 {width:  30.00%;}
  .col-iphone4-35	 {width:  35.00%;}
  .col-iphone4-40	 {width:  40.00%;}
  .col-iphone4-45	 {width:  45.00%;}
  .col-iphone4-50	 {width:  50.00%;}
  .col-iphone4-55	 {width:  55.00%;}
  .col-iphone4-60	 {width:  60.00%;}
  .col-iphone4-65	 {width:  65.00%;}
  .col-iphone4-70	 {width:  70.00%;}
  .col-iphone4-75	 {width:  75.00%;}
  .col-iphone4-80	 {width:  80.00%;}
  .col-iphone4-85	 {width:  85.00%;}
  .col-iphone4-90	 {width:  90.00%;}
  .col-iphone4-95	 {width:  95.00%;}
  .col-iphone4-100 {width: 100.00%;}
}

@media only screen and (min-width: 568px) {
  .col-iphone5-5 	 {width:   5.00%;}
  .col-iphone5-10  {width:  10.00%;}
  .col-iphone5-15  {width:  15.00%;}
  .col-iphone5-20	 {width:  20.00%;}
  .col-iphone5-25	 {width:  25.00%;}
  .col-iphone5-30	 {width:  30.00%;}
  .col-iphone5-35	 {width:  35.00%;}
  .col-iphone5-40	 {width:  40.00%;}
  .col-iphone5-45	 {width:  45.00%;}
  .col-iphone5-50	 {width:  50.00%;}
  .col-iphone5-55	 {width:  55.00%;}
  .col-iphone5-60	 {width:  60.00%;}
  .col-iphone5-65	 {width:  65.00%;}
  .col-iphone5-70	 {width:  70.00%;}
  .col-iphone5-75	 {width:  75.00%;}
  .col-iphone5-80	 {width:  80.00%;}
  .col-iphone5-85	 {width:  85.00%;}
  .col-iphone5-90	 {width:  90.00%;}
  .col-iphone5-95	 {width:  95.00%;}
  .col-iphone5-100 {width: 100.00%;}
}

@media only screen and (min-width: 667px) {
  .col-iphone6-5 	 {width:   5.00%;}
  .col-iphone6-10  {width:  10.00%;}
  .col-iphone6-15  {width:  15.00%;}
  .col-iphone6-20	 {width:  20.00%;}
  .col-iphone6-25	 {width:  25.00%;}
  .col-iphone6-30	 {width:  30.00%;}
  .col-iphone6-35	 {width:  35.00%;}
  .col-iphone6-40	 {width:  40.00%;}
  .col-iphone6-45	 {width:  45.00%;}
  .col-iphone6-50	 {width:  50.00%;}
  .col-iphone6-55	 {width:  55.00%;}
  .col-iphone6-60	 {width:  60.00%;}
  .col-iphone6-65	 {width:  65.00%;}
  .col-iphone6-70	 {width:  70.00%;}
  .col-iphone6-75	 {width:  75.00%;}
  .col-iphone6-80	 {width:  80.00%;}
  .col-iphone6-85	 {width:  85.00%;}
  .col-iphone6-90	 {width:  90.00%;}
  .col-iphone6-95	 {width:  95.00%;}
  .col-iphone6-100 {width: 100.00%;}
}

@media only screen and (min-width: 736px) {
  .col-iphone7-5 	 {width:   5.00%;}
  .col-iphone7-10  {width:  10.00%;}
  .col-iphone7-15  {width:  15.00%;}
  .col-iphone7-20	 {width:  20.00%;}
  .col-iphone7-25	 {width:  25.00%;}
  .col-iphone7-30	 {width:  30.00%;}
  .col-iphone7-35	 {width:  35.00%;}
  .col-iphone7-40	 {width:  40.00%;}
  .col-iphone7-45	 {width:  45.00%;}
  .col-iphone7-50	 {width:  50.00%;}
  .col-iphone7-55	 {width:  55.00%;}
  .col-iphone7-60	 {width:  60.00%;}
  .col-iphone7-65	 {width:  65.00%;}
  .col-iphone7-70	 {width:  70.00%;}
  .col-iphone7-75	 {width:  75.00%;}
  .col-iphone7-80	 {width:  80.00%;}
  .col-iphone7-85	 {width:  85.00%;}
  .col-iphone7-90	 {width:  90.00%;}
  .col-iphone7-95	 {width:  95.00%;}
  .col-iphone7-100 {width: 100.00%;}
}

@media only screen and (min-width: 768px) {
  .col-ipad-5 	{width:   5.00%;}
  .col-ipad-10  {width:  10.00%;}
  .col-ipad-15  {width:  15.00%;}
  .col-ipad-20	{width:  20.00%;}
  .col-ipad-25	{width:  25.00%;}
  .col-ipad-30	{width:  30.00%;}
  .col-ipad-35	{width:  35.00%;}
  .col-ipad-40	{width:  40.00%;}
  .col-ipad-45	{width:  45.00%;}
  .col-ipad-50	{width:  50.00%;}
  .col-ipad-55	{width:  55.00%;}
  .col-ipad-60	{width:  60.00%;}
  .col-ipad-65	{width:  65.00%;}
  .col-ipad-70	{width:  70.00%;}
  .col-ipad-75	{width:  75.00%;}
  .col-ipad-80	{width:  80.00%;}
  .col-ipad-85	{width:  85.00%;}
  .col-ipad-90	{width:  90.00%;}
  .col-ipad-95	{width:  95.00%;}
  .col-ipad-100 {width: 100.00%;}
}

@media only screen and (min-width: 1024px) {
  .col-pc-5 	{width:   5.00%;}
  .col-pc-10  {width:  10.00%;}
  .col-pc-15  {width:  15.00%;}
  .col-pc-20	{width:  20.00%;}
  .col-pc-25	{width:  25.00%;}
  .col-pc-30	{width:  30.00%;}
  .col-pc-35	{width:  35.00%;}
  .col-pc-40	{width:  40.00%;}
  .col-pc-45	{width:  45.00%;}
  .col-pc-50	{width:  50.00%;}
  .col-pc-55	{width:  55.00%;}
  .col-pc-60	{width:  60.00%;}
  .col-pc-65	{width:  65.00%;}
  .col-pc-70	{width:  70.00%;}
  .col-pc-75	{width:  75.00%;}
  .col-pc-80	{width:  80.00%;}
  .col-pc-85	{width:  85.00%;}
  .col-pc-90	{width:  90.00%;}
  .col-pc-95	{width:  95.00%;}
  .col-pc-100 {width: 100.00%;}
  
 	.kassa_bevestig	{text-align	: right;}						/* buttons */
  
}

@media only screen and (min-width: 1583px) {      /* 1600 minus 17 voor de rechter scrollbar */
  .col-pcxl-5 	{width:   5.00%;}
  .col-pcxl-10  {width:  10.00%;}
  .col-pcxl-15  {width:  15.00%;}
  .col-pcxl-20	{width:  20.00%;}
  .col-pcxl-25	{width:  25.00%;}
  .col-pcxl-30	{width:  30.00%;}
  .col-pcxl-35	{width:  35.00%;}
  .col-pcxl-40	{width:  40.00%;}
  .col-pcxl-45	{width:  45.00%;}
  .col-pcxl-50	{width:  50.00%;}
  .col-pcxl-55	{width:  55.00%;}
  .col-pcxl-60	{width:  60.00%;}
  .col-pcxl-65	{width:  65.00%;}
  .col-pcxl-70	{width:  70.00%;}
  .col-pcxl-75	{width:  75.00%;}
  .col-pcxl-80	{width:  80.00%;}
  .col-pcxl-85	{width:  85.00%;}
  .col-pcxl-90	{width:  90.00%;}
  .col-pcxl-95	{width:  95.00%;}
  .col-pcxl-100 {width: 100.00%;}
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Top navigatiemenu 
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

ul.topnav li {
	float: left;
}

ul.topnav li a {
  display: inline-block;
	color: white;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
}

ul.topnav li a:hover {
	background-color: #33b5e5;
}

ul.topnav li.icon {
	display: none;
}

@media screen and (max-width:768px) {
  ul.topnav li:not(:first-child) {display: none;} 
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:768px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}